<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="java.util.List, com.petcommunity.model.LostPet" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    List<LostPet> lostPets = (List<LostPet>) request.getAttribute("lostPets");
%>
<%
    String role = (String) session.getAttribute("role");
%>
<html>
<head>
    <title>走失宠物管理 - 社区宠物管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="css/management.css">
</head>
<body>
    <!-- 装饰性爪印 -->
    <i class="fas fa-paw decorative-paws paw-1"></i>
    <i class="fas fa-paw decorative-paws paw-2"></i>
    <i class="fas fa-paw decorative-paws paw-3"></i>
    <i class="fas fa-paw decorative-paws paw-4"></i>

    <div class="page-container">
        <div class="main-container">
            <!-- 页面头部 -->
            <div class="page-header">
                <div class="header-content">
                    <div class="header-icon">
                        <i class="fas fa-search"></i>
                    </div>
                    <h1 class="page-title">走失宠物管理</h1>
                    <p class="page-subtitle">帮助每个小生命找到回家的路</p>
                </div>
            </div>

            <div class="content-wrapper">
                <!-- 添加走失记录表单 -->
                <c:if test="${role == 'admin'}">
                    <div class="form-section">
                        <div class="section-header">
                            <div class="section-title">
                                <i class="fas fa-plus-circle section-icon"></i>
                                添加走失记录
                            </div>
                        </div>
                        <form method="post" action="lostpets" class="add-form">
                            <div class="form-row">
                                <div class="form-group">
                                    <label>
                                        <i class="fas fa-dog"></i>
                                        宠物ID
                                    </label>
                                    <input type="number" name="petId" required placeholder="请输入宠物ID">
                                </div>
                                <div class="form-group">
                                    <label>
                                        <i class="fas fa-calendar-alt"></i>
                                        走失日期
                                    </label>
                                    <input type="date" name="lostDate" required>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label>
                                        <i class="fas fa-map-marker-alt"></i>
                                        走失地点
                                    </label>
                                    <input type="text" name="location" required placeholder="请输入走失地点">
                                </div>
                                <div class="form-group">
                                    <label>
                                        <i class="fas fa-check-circle"></i>
                                        找回状态
                                    </label>
                                    <select name="found" class="select-input">
                                        <option value="false">未找回</option>
                                        <option value="true">已找回</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group" style="grid-column: 1 / -1;">
                                    <label>
                                        <i class="fas fa-comment"></i>
                                        详细描述
                                    </label>
                                    <textarea name="description" rows="3" placeholder="请描述宠物特征、走失时的情况等详细信息..."
                                              style="width: 100%; padding: 15px 20px; border: 2px solid #E8E8E8; border-radius: 10px; font-size: 1rem; font-family: inherit; resize: vertical; transition: all 0.3s ease;"
                                              onfocus="this.style.borderColor='#FF6B6B'; this.style.boxShadow='0 0 0 3px rgba(255, 107, 107, 0.1)'; this.style.transform='translateY(-2px)';"
                                              onblur="this.style.borderColor='#E8E8E8'; this.style.boxShadow='none'; this.style.transform='translateY(0)';"></textarea>
                                </div>
                            </div>
                            <div class="form-actions">
                                <button type="submit" class="submit-btn">
                                    <i class="fas fa-plus btn-icon"></i>
                                    添加走失记录
                                </button>
                            </div>
                        </form>
                    </div>
                </c:if>

                <!-- 走失宠物记录表格 -->
                <div class="table-section">
                    <div class="section-header">
                        <div class="section-title">
                            <i class="fas fa-list section-icon"></i>
                            走失宠物记录
                        </div>
                        <div class="table-info">
                            <span class="record-count">
                                共 ${lostPets != null ? lostPets.size() : 0} 条记录
                            </span>
                        </div>
                    </div>

                    <div class="table-container">
                        <c:choose>
                            <c:when test="${lostPets != null && lostPets.size() > 0}">
                                <table class="data-table">
                                    <thead>
                                        <tr>
                                            <th>
                                                <div class="th-content">
                                                    <i class="fas fa-hashtag"></i>
                                                    记录ID
                                                </div>
                                            </th>
                                            <th>
                                                <div class="th-content">
                                                    <i class="fas fa-dog"></i>
                                                    宠物信息
                                                </div>
                                            </th>
                                            <th>
                                                <div class="th-content">
                                                    <i class="fas fa-calendar"></i>
                                                    走失日期
                                                </div>
                                            </th>
                                            <th>
                                                <div class="th-content">
                                                    <i class="fas fa-map-marker-alt"></i>
                                                    走失地点
                                                </div>
                                            </th>
                                            <th>
                                                <div class="th-content">
                                                    <i class="fas fa-comment"></i>
                                                    描述信息
                                                </div>
                                            </th>
                                            <th>
                                                <div class="th-content">
                                                    <i class="fas fa-check-circle"></i>
                                                    找回状态
                                                </div>
                                            </th>
                                            <c:if test="${role == 'admin'}">
                                            <th>
                                                <div class="th-content">
                                                    <i class="fas fa-cogs"></i>
                                                    操作
                                                </div>
                                            </th>
                                        </c:if>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <c:forEach var="l" items="${lostPets}">
                                            <tr>
                                                <td class="id-cell" data-label="记录ID">${l.lostId}</td>
                                                <td data-label="宠物信息">
                                                    <div class="pet-info">
                                                        <div class="pet-avatar">
                                                            <i class="fas fa-paw"></i>
                                                        </div>
                                                        <span class="owner-id">ID: ${l.petId}</span>
                                                    </div>
                                                </td>
                                                <td data-label="走失日期">
                                                    <span class="birth-date">${l.lostDate}</span>
                                                </td>
                                                <td data-label="走失地点">
                                                    <div class="address-text">${l.location}</div>
                                                </td>
                                                <td data-label="描述信息">
                                                    <div class="address-text" style="max-width: 200px; word-wrap: break-word;">${l.description}</div>
                                                </td>
                                                <td data-label="找回状态">
                                                    <c:choose>
                                                        <c:when test="${l.found}">
                                                            <span style="background: linear-gradient(135deg, #E8F5E8 0%, #C8E6C9 100%); color: #2E7D32; padding: 6px 12px; border-radius: 15px; font-size: 0.9rem; font-weight: 500; border: 1px solid #C8E6C9; display: inline-flex; align-items: center; gap: 4px;">
                                                                <i class="fas fa-check-circle"></i>
                                                                已找回
                                                            </span>
                                                        </c:when>
                                                        <c:otherwise>
                                                            <span style="background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%); color: #C62828; padding: 6px 12px; border-radius: 15px; font-size: 0.9rem; font-weight: 500; border: 1px solid #FFCDD2; display: inline-flex; align-items: center; gap: 4px;">
                                                                <i class="fas fa-times-circle"></i>
                                                                未找回
                                                            </span>
                                                        </c:otherwise>
                                                    </c:choose>
                                                </td>
                                                <c:if test="${role == 'admin'}">
                                                <td data-label="操作">
                                                    <div class="action-buttons">
                                                        <button class="edit-btn" onclick="editLost(${l.lostId})">
                                                            <i class="fas fa-edit"></i>编辑
                                                        </button>
                                                        <button class="delete-btn" onclick="deleteLost(${l.lostId})">
                                                            <i class="fas fa-trash"></i>删除
                                                        </button>
                                                    </div>
                                                </td>
                                            </c:if>
                                            </tr>
                                        </c:forEach>
                                    </tbody>
                                </table>
                            </c:when>
                            <c:otherwise>
                                <div class="empty-state">
                                    <div class="empty-icon">
                                        <i class="fas fa-search"></i>
                                    </div>
                                    <h3>暂无走失记录</h3>
                                    <p>目前没有走失宠物记录，希望所有小生命都平安</p>
                                </div>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>

                <!-- 返回按钮 -->
                <div class="back-section">
                    <a href="dashboard.jsp" class="back-btn">
                        <i class="fas fa-home"></i>
                        返回首页
                    </a>
                </div>
            </div>
        </div>
    </div>
<script>
function editLost(id) {
    if (confirm('确定要编辑该丢失记录吗？')) {
        window.location.href = 'edit?type=lost&id=' + id;
    }
}

function deleteLost(id) {
    if (confirm('确定要删除该丢失记录吗？此操作不可恢复！')) {
        window.location.href = 'delete?type=lost&id=' + id;
    }
}
</script>

</body>
</html>